<template>
  <container title="商品分类">
    <div class="main-card" v-loading="loading">
      <tbc-pagination :total="total" :config="{page, size}" simple @change="loadDataList">
        <template #left>
          <tbc-selector
              ref="cat"
              v-model="catPath"
              api="/goods.category/async"
              check-strictly
              size="small"
              style="width:240px;margin-right:10px;"
              @change="changeCatPath"/>
        </template>
        <template #right>
          <el-button size="small" icon="el-icon-plus" circle @click="$refs.form.show()"></el-button>
          <el-button size="small" icon="el-icon-refresh" circle @click="loadDataList(page)"></el-button>
        </template>
      </tbc-pagination>

      <div class="data-container">
        <tbc-dynamic-table
            v-loading="loading"
            :data="dataList"
            :cols="[
            {type: 'selection', width: 55},
            {label: '图标', prop: 'icon', type: 'image', width: 60, style: 'width:40px;height:40px;'},
            {label: '名称', prop: 'cat_name', width: 200},
            {label: '关联模型', prop: 'model_name', minWidth: 200},
            {label: '排序', prop: 'sort_weight', align: 'center', width: 140},
            {label: '子类个数', prop: 'children', align: 'center', width: 140},
            {label: '状态', prop: 'status', width: 200},
            {label: '操作', width: 140, type: 'action', fixed: 'right',
             click: onButtonClick, button: [
                {label: '编辑', type: 'text', code: 'edit' },
                {label: '子类', type: 'text', code: 'children'},
        ], more: [
              {label: '删除', type: 'danger', code: 'delete'},
              {label: '设置类型', type: 'danger', code: 'model'},
        ]}]">
          <template #cat_name="scope">
            <p>{{ scope.row.cat_id }}</p>
            <p>{{ scope.row.cat_name }}</p>
          </template>
          <template #model_name="scope">
            <p>{{ scope.row.model_id }}</p>
            <p>{{ scope.row.model_name }}</p>
          </template>
          <template #status="scope">
            <p>
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 1"
                  type="success"
              >正常
              </el-tag
              >
              <el-tag
                  effect="dark"
                  size="mini"
                  v-if="scope.row.status === 2"
                  type="danger"
              >已禁用
              </el-tag
              >
            </p>
            <p>{{ scope.row.create_time }}</p>
          </template>
        </tbc-dynamic-table>
      </div>
      <tbc-pagination :total="total" @change="loadDataList"/>
    </div>
  </container>
  <goods-cat-form ref="form"/>
  <goods-cat-set-model ref="model" @success="loadDataList"/>
</template>
<script lang="ts">
import {
  defineComponent, onMounted, defineAsyncComponent,
  ref, Ref
} from 'vue'
import useGoodsCategory from './api/goodsCategory'

export default defineComponent({

  name: 'goods-cat',

  components: {
    GoodsCatForm: defineAsyncComponent(() =>
        import('./GoodsCatForm.vue')),
    GoodsCatSetModel: defineAsyncComponent(() =>
        import('./GoodsCatSetModel.vue')),
  },

  setup() {

    const category = useGoodsCategory()
    const model: Ref = ref(null)
    const form: Ref = ref(null)
    const onButtonClick = (data: { cat_id: string }, action: string) => {
      if (action === 'model') {
        model.value.show(data)
      }
      if (action === 'edit') {
        form.value.show(data)
      }
      if (action === 'children') {
        (category.parentId.value as string) = data.cat_id as string
        (category.catPath.value as string[]) = [...category.catPath.value, data.cat_id] //.push(data.cat_id)
        console.log(category.catPath.value)
        category.loadDataList(1)
      }
      if (action === 'delete') return category.deleteDataItem(data)
    }

    const changeCatPath = (data) => {
      console.log(
          'changeCatPath',
          data
      )
      category.parentId.value = data ? data[data.length - 1] : ''
      category.loadDataList(1)

    }
    onMounted(() => {
      category.loadDataList(1)
    })

    return {
      ...category,
      model,
      form,
      onButtonClick,
      changeCatPath
    }
  }
})
</script>
